import { Modal } from 'antd';
import React, { useRef, useState } from 'react';
import classNames from 'classnames';
import styles from './index.less';
import ProTable, { ActionType, ProColumns } from '@ant-design/pro-table';
import { Access } from 'umi';

export type Log = {
    visible: boolean;
    setVisible: any;
    handleFunc: any;
}

const ModalLog: React.FC<Log> = ({ handleFunc, setVisible, visible }) => {

    const actionRef = useRef<ActionType>();
    const [pageSize, setPageSize] = useState<number>(20);

    const columns: ProColumns<any>[] = [
        {
            title: '操作时间',
            dataIndex: 'time',
            width: 220,
        },
        {
            title: '操作人',
            dataIndex: 'userName',
            width: 220,
        },
        {
            title: '操作内容',
            dataIndex: 'content',
        },
    ];

    return (
        <Modal width={720} title={'操作日志'} visible={visible} maskClosable={true} destroyOnClose={true} onCancel={() => setVisible(false)}>
            <ProTable<API.RuleListItem, API.PageParams>
                actionRef={actionRef}
                rowKey="id"
                pagination={{
                    pageSize: pageSize,
                    showSizeChanger: true,
                    size: 'small',
                    pageSizeOptions: [50, 100, 200, 400],
                    onShowSizeChange: (current, pageSize) => {
                        setPageSize(pageSize);
                    }
                }}
                scroll={{ y: 380 }}
                search={false}
                beforeSearchSubmit={(params) => {
                    params.expressName && (params.expressId = params.expressName);
                    return params;
                }}
                options={false}
                request={async (params) => {
                    const tableData = await handleFunc(params);
                    return tableData;
                }}
                columns={columns}
            />
        </Modal>
    )
};

export default ModalLog;
